<template>
	<view class="page">
		<view class="top-icon" :style="{top:$store.state.StatusBar.statusBar + 'px'}" @click="to()">
			<u-icon name='arrow-left' size="42rpx" color="#fff"></u-icon>
		</view>
		<view class="content mt-50">
			<template >
				<view class="item" v-for="(item,index) in dongtaiList">
					<view class="item-time c-999">
						{{item.fabuTime}}
					</view>
					<view class="text_28 c-fff item-text">
						{{item.message}}
					</view>
					<view class="flex_r item-list">
						<view class="item-img" v-for="(item,index) in item.imageList">
							<image class="img" mode="aspectFill" :src="item"></image>
						</view>
					</view>
					<view class="m-line">
						<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
					</view>
				</view>
			</template>
		</view>
			<view style="position:fixed; right:40rpx; bottom:100rpx; color:#fff; z-index:999; background-color: #242818; width:100rpx; height:100rpx; border-radius: 50%;" @tap="to('/pages/m-pages/m-world-form/index')">
				<image src="../m-home/img/icon_send.png" style="width:60rpx; height:60rpx; margin-left:20rpx; margin-top:20rpx;"></image>
			</view>

		<view style="height: 120rpx;">
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				list: [],
				dongtaiList: [],
				my: 0,
				pageno: 1,
				guanzhuState: 2,
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				userid: 0,
				navIndex: 1,
				isPlay: true,
				info: {
					signatureDto: {}
				},
				navList: [
					// {
					// 	title: '关于我'
					// },
					{
						title: '动态'
					}
				]
			}
		},
		onHide(){
			if(this.video.innerAudioContext){
				this.video.innerAudioContext.destroy();
			}
			console.log("onHide")
		},
		onLoad(option) {
			this.userid = option.userid;
			this.my = option.my;
			this.getInfo();
			this.dongtaiList = [];
			this.pageno = 1;
			this.getDongtai()
		},
		onReachBottom() {
			if(this.navIndex == 1){
				this.pageno++;
				this.getDongtai()
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			to,
			guanzhu(state){
				this.guanzhuState = state
			},
			open(){
				let info = this.info;
				uni.showModal({
					title: '提示',
					content: `位置：`+info.address+`
经纬度：`+info.lat+`,`+info.lon+`
金币：`+info.voicePrice+`
钻石:`+info.videoPrice,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async handleCalling(e) {
			
				let type = e.currentTarget.dataset.value;
				console.log(this.info.tengxuncode, '通话id');
				let res = await this.$c.post("/app/user/isEnoughVideoAndVoice?tengxuncode="+this.info.tengxuncode+"&type="+Number(type))
				if(res.code != 0 ){
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				
				// 小程序通话
				// #ifdef  MP-WEIXIN
				this.$refs.TUICalling.call({
					userID: this.info.tengxuncode,
					type: type
				});
				// #endif
				
				// APP通话
				// #ifdef  APP-PLUS
				uni.$TUICallKit.call({
						userID: this.info.tengxuncode,
						callMediaType: Number(type)
					},
					res => {
						if (res.code === 0) {
							let type = Number(type) == 1 ? 2 : 3;
							this.$c.post("/app/user/feeDeduction?txCode="+this.info.tengxuncode+"&type="+type)
							console.log('call success');
						} else {
							console.log(`${res.msg}`);
						}
					}
				);
				// #endif
			},
			onPlay() {
				if(this.video.status){
					//暂停
					this.video.innerAudioContext.stop();
					this.video.status = false;
				}else{
					console.log('播放')
					//播放
					this.video.innerAudioContext.play();
					this.video.status = true;
				}
			},
			goMsg(){
			  uni.navigateTo({
				url: `/im/chat/chat?userid=`+this.userid+`&conversationID=C2C`+this.info.tengxuncode,
			  });
			},
			async getInfo(){
				// console.log(this.userid)
				let res = await this.$c.post("/app/user/lookTinfo?userid="+this.userid)
				if(res.code != 0){
					// uni.navigateTo({
					//   url: '/im/login/login'
					// });
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
				this.info = res.data
				this.video.innerAudioContext = uni.createInnerAudioContext();
				if(this.info.signatureDto && this.info.signatureDto.voiceUrl){
					this.video.innerAudioContext.src = this.info.signatureDto.voiceUrl;
				}else{
					this.info.signatureDto = {}
				}
				this.video.innerAudioContext.autoplay = false;
				this.video.innerAudioContext.onPlay(() => {
					this.video.status = true;
				  console.log('开始播放');
				});
				// this.video.innerAudioContext.onError((res) => {
				//   console.log(res.errMsg);
				//   console.log(res.errCode);
				// });
				this.video.innerAudioContext.onEnded((res) => {
				  this.video.status = false;
				  console.log('播放结束');
				});
				console.log("======",this.info,"=========")
				this.list.push({
					img: this.info.pic
				})
				if(this.info.xingxiang){
					let xingxiang = this.info.xingxiang.split(',');
					for(let item of xingxiang){
						if(item != ''){
							this.list.push({
								img: item
							})
						}
					}
				}
				this.guanzhuState = this.info.guanzhuState;
				console.log(this.list)
				console.log(res.data)
			},
			async getDongtai(){
				let res = await this.$c.post("/app/user/getTdongtai?userid="+this.userid+"&pageno="+this.pageno)
				this.dongtaiList = this.dongtaiList.concat(res.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		padding-bottom: 80rpx;
	}

	.top-icon {
		position: fixed;
		left: 30rpx;
		z-index: 99;
		width: 50rpx;
		height: 50rpx;
	}

	.top {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 550rpx;

		.voice {
			position: absolute;
			z-index: 2;
			left: 30rpx;
			bottom: 100rpx;
			box-sizing: border-box;
			padding: 0 8rpx 0 0;
			width: 260rpx;
			height: 50rpx;
			border-radius: 25rpx;
			background-color: #ff0f6f;

			.voice-icon {
				width: 50rpx;
				height: 50rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.voice-img {
				height: 100%;
				margin: 0 10rpx;
			}

			.voice-value {
				box-sizing: border-box;
				margin-right: 10rpx;
			}
		}

	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		position: relative;
		z-index: 2;
		width: 100%;
		// border-radius: 30rpx 30rpx 0 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 0, 0, 0));

		.content-row {
			width: 100%;
			margin-bottom: 30rpx;

			.content-row-l {
				.content-row-l-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}

			}

			.content-row-button {
				box-sizing: border-box;
				padding: 0 50rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
				// background-image: linear-gradient(to left, #ff94b4, #fe437a);
			}
		}


		.fun {
			width: 100%;
			margin-bottom: 30rpx;

			.fun-item {
				width: calc(50% - 15rpx);
				height: 150rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.1);

				.fun-img {
					width: 80rpx;
					height: 80rpx;
					margin: 0 24rpx 0 40rpx;
					border-radius: 50%;
				}

				view {
					color: $uni-color-primary;
				}
			}

		}

		.signature {
			margin-bottom: 30rpx;
		}




		.nav {
			width: 100%;
			height: 130rpx;

			.nav-item {
				height: 100rpx;
				transition: all .3s;

				.nav-item-title {
					color: #bebebe;
					transition: all .3s;
				}

				.nav-item-str {
					opacity: 0;
					transition: all .3s;
					width: 50rpx;
					height: 30rpx;
				}
				.active-line{
					width: 100%;
					height: 6rpx;
					border-radius: 12rpx;
					background: #FDB175;
					margin-top: 12rpx;
				}
			}

			.nav_item {
				.nav-item-title {
					color: $uni-color-primary;
					font-size: 34rpx;
					transition: all .3s;
				}

				.nav-item-str {
					position: relative;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}
			}



		}


		.infr {
			width: 100%;
			margin: 0 auto 30rpx auto;
		}

		.infr-row {
			width: calc(100% - 30rpx);
			height: 88rpx;

			.infr-row-item {
				height: 100%;
				margin-left: 20rpx;

				.infr-row-item-title {
					margin-right: 10rpx;
				}
			}
		}

		.label {
			width: 100%;
			flex-wrap: wrap;

			.label-item {
				box-sizing: border-box;
				padding: 0 30rpx;
				height: 50rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				background-color: rgba(255, 255, 255, 0.1);
			}
		}


		.item {
			position: relative;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.m-line {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.item-time {
				height: 50rpx;
			}

			.item-text {
				margin-bottom: 15rpx;
			}

			.item-list {
				position: relative;
				left: -15rpx;
				width: calc(100% + 15rpx);
				flex-wrap: wrap;

				.item-img {
					width: calc(33.33% - 15rpx);
					height: 230rpx;
					margin-left: 15rpx;
					margin-bottom: 15rpx;
					border-radius: 14rpx;
					background-color: #4bfff0;
				}
			}

		}





	}

	.operate {
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 80rpx;
		left: 0;
		z-index: 99;
		width: 100%;

		view {
			color:$uni-color-primary;
		}

		.operate-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.operate-item {
			.operate-icon {
				margin-right: 0rpx;
			}
		}

		.operate-button_ {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			border-radius: 44rpx;
			background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
			/* background-image: linear-gradient(to left, #c745fd, #d36dfd); */

			.size_white {
				color: #fff;
			}
		}

		.operate-button {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			border-radius: 44rpx;
			border: 1px solid $uni-color-primary;
		}
	}
</style>